<script type="text/javascript">

	var type_garde = null;
        var matricules = null;

        function init_page() {
            
            if ( document.getElementById('valider_Step1') != null ) valider_Step1();

        }

        function calendar_clic_page() {

            if ( document.getElementById('valider_Step1') != null ) valider_Step1();

        }

        function navette_clic_page() {

            if ( document.getElementById('valider_Step1') != null ) valider_Step1();

        }

	function refresh_navette() {

		gethtml();

		html.onreadystatechange = function(){
			if(html.readyState==4 && html.status==200){
				if ( document.getElementById('navette_1') != null ) {
					document.getElementById('navette_1').innerHTML = html.responseText;
					init_navette();
				}
			}
		}

		var centre = document.getElementById('centre');
                var centre_id = null;
                if ( centre != null ) {
                    centre_id = centre.value;
                }

		html.open("GET","./composant.php?type=navette&centre_id="+centre_id,true);
		html.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

		html.send(null);

	}

        function valider_Step1() {

            if ( dateJour == null || ( nb_droite == 0 && navette_left_1 != null ) )
                document.getElementById('valider_Step1').style.display = 'none';
            else
                document.getElementById('valider_Step1').style.display = 'block';

        }

        function click_Step1() {

            document.getElementById('dateValeur').setAttribute('value', dateValeur);

            matriculesTab = getPompiers_navette();

            if ( matriculesTab == null ) {
                matricules = 'null';
            } else {
                matricules = matriculesTab;
                /*
                    for ( i = 0 ; i < matriculesTab.length ; i++ ) {
                        matricules = matricules + ',' + matriculesTab[i];
                    }
                    matricules = matricules.substring(1, matricules.length);
                */
            }

            document.getElementById('matricules').setAttribute('value', matricules);
            
        }

	function change_type_garde() {
		elements = document.getElementsByName('type_garde');
		for ( i=0 ; i < elements.length ; i++ ) {
			if ( elements[i].checked ) type_garde = elements[i].value;
		}
	}

	function modif_garde(id) {
		if ( type_garde == null )
			alert('Sélectionner un type de garde');
		else
			if ( type_garde == 'delete' )
				document.getElementById(id).innerHTML = '';
			else
				document.getElementById(id).innerHTML = type_garde;
	}

</script>

<!-- BEGIN step_1 -->

<center> <h2> Disponibilitées - Etape 1 </h2> </center>

<center> <table id="table_step_1">
	<tr> 
            <td width="38px">
                
            </td>
            <td>

            <!-- BEGIN multiple_centre -->
		<center>
			<i>Choix de la caserne:</i> 
                        <select id="centre" onchange="refresh_navette();">
				<!-- BEGIN centre -->
					<option value="{step_1.multiple_centre.centre.id}">{step_1.multiple_centre.centre.nom}</option>
				<!-- END centre -->
			</select>
		</center>
		<br />
             <!-- END multiple_centre -->

		<center> <i>Choix du jour:</i> <div id="calendar"></div> </center>
             
            </td>

             <!-- BEGIN multiple_pompier -->
             <td>
		<center> 
			<i>Liste du Personnel: (Hors Garde et Garde)</i> <br /> 
			<table><tr><td><i>du</i></td><td><div id="date_jour" /></td></table>
		</center>
		<div id="navette_1"> </div>
              </td>
              <!-- END multiple_pompier -->

              <td width="38px">
                    <form action="./disponibilitees.php?step=2" method="POST">
                        <input id="dateValeur" type="hidden" name="dateValeur" value="" />
                        <input id="matricules" type="hidden" name="matricules" value="" />
                        <input id="valider_Step1" class="navigation_right" type="submit" value="" onclick="click_Step1();" />
                    </form>
                    <!-- <a class="navigation" style="text-align: right;" href="./disponibilitees.php?step=2"><img src="./style/images/icones/next.png"></a> -->
              </td>
         </tr>
</table> </center>



<!-- END step_1 -->

<!-- BEGIN step_2 -->

        <center> <h2> Disponibilitées - Etape 2 : Garde du {step_2.dateJour} </h2> </center>

<center> <table id="table_step_2">
	<tr>
            <td width="38px">
                <a class="navigation" style="text-align: right;" href="./disponibilitees.php?step=1"><img src="./style/images/icones/previous.png"></a>

            </td>
            <td>
	<center>

		<table>
                    <tr>
                            <td> Type de Garde: </td>
                            <!-- BEGIN type_garde -->
                            <td> <input type="radio" name="type_garde" value="{step_2.type_garde.nom}" onchange='change_type_garde();' /> {step_2.type_garde.nom} </td>
                            <!-- END type_garde -->
                            <td> <input type="radio" name="type_garde" value="delete" onchange='change_type_garde();' /> Supprimer </td>
                    </tr>
		</table>

	</center>

	<br />

	<center>
		<div>
			<table>
				<tr>
                                        <th>  </th>
					<th class="jour"> 7 </th>
					<th class="jour"> 8 </th>
					<th class="jour"> 9 </th>
					<th class="jour"> 10 </th>
					<th class="jour"> 11 </th>
					<th class="jour"> 12 </th>
					<th class="jour"> 13 </th>
					<th class="jour"> 14 </th>
					<th class="jour"> 15 </th>
					<th class="jour"> 16 </th>
					<th class="jour"> 17 </th>
					<th class="jour"> 18 </th>
					<th class="nuit"> 19 </th>
					<th class="nuit"> 20 </th>
					<th class="nuit"> 21 </th>
					<th class="nuit"> 22 </th>
					<th class="nuit"> 23 </th>
					<th class="nuit"> 0 </th>
					<th class="nuit"> 1 </th>
					<th class="nuit"> 2 </th>
					<th class="nuit"> 3 </th>
					<th class="nuit"> 4 </th>
					<th class="nuit"> 5 </th>
					<th class="nuit"> 6 </th>
				</tr>
                               <!-- BEGIN pompier -->
				<tr>
                                        <td> {step_2.pompier.grade_nom_prenom_matricule} </td>
                                        <td> <div id="7_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('7_{step_2.pompier.matricule}');"> </div> </td>
					<td> <div id="8_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('8_{step_2.pompier.matricule}');"> </div> </td>
					<td> <div id="9_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('9_{step_2.pompier.matricule}');"> </div> </td>
					<td> <div id="10_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('10_{step_2.pompier.matricule}');"> </div> </td>
					<td> <div id="11_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('11_{step_2.pompier.matricule}');"> </div> </td>
					<td> <div id="12_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('12_{step_2.pompier.matricule}');"> </div> </td>
					<td> <div id="13_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('13_{step_2.pompier.matricule}');"> </div> </td>
					<td> <div id="14_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('14_{step_2.pompier.matricule}');"> </div> </td>
					<td> <div id="15_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('15_{step_2.pompier.matricule}');"> </div> </td>
					<td> <div id="16_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('16_{step_2.pompier.matricule}');"> </div> </td>
					<td> <div id="17_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('17_{step_2.pompier.matricule}');"> </div> </td>
					<td> <div id="18_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('18_{step_2.pompier.matricule}');"> </div> </td>
					<td> <div id="19_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('19_{step_2.pompier.matricule}');"> </div> </td>
					<td> <div id="20_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('20_{step_2.pompier.matricule}');"> </div> </td>
					<td> <div id="21_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('21_{step_2.pompier.matricule}');"> </div> </td>
					<td> <div id="22_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('22_{step_2.pompier.matricule}');"> </div> </td>
					<td> <div id="23_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('23_{step_2.pompier.matricule}');"> </div> </td>
					<td> <div id="0_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('0_{step_2.pompier.matricule}');"> </div> </td>
					<td> <div id="1_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('1_{step_2.pompier.matricule}');"> </div> </td>
					<td> <div id="2_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('2_{step_2.pompier.matricule}');"> </div> </td>
					<td> <div id="3_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('3_{step_2.pompier.matricule}');"> </div> </td>
					<td> <div id="4_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('4_{step_2.pompier.matricule}');"> </div> </td>
					<td> <div id="5_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('5_{step_2.pompier.matricule}');"> </div> </td>
					<td> <div id="6_{step_2.pompier.matricule}" class="div_H" onclick="modif_garde('6_{step_2.pompier.matricule}');"> </div> </td>
				</tr>
                                 <!-- END pompier -->
			</table>
		</div>
	</center>

	<input id="h7" type="hidden" value="" name="h7"/>
	<input id="h8" type="hidden" value="" name="h8" />
	<input id="h9" type="hidden" value="" name="h9" />
	<input id="h10" type="hidden" value="" name="h10" />
	<input id="h11" type="hidden" value="" name="h11" />
	<input id="h12" type="hidden" value="" name="h12" />
	<input id="h13" type="hidden" value="" name="h13" />
	<input id="h14" type="hidden" value="" name="h14" />
	<input id="h15" type="hidden" value="" name="h15" />
	<input id="h16" type="hidden" value="" name="h16" />
	<input id="h17" type="hidden" value="" name="h17" />
	<input id="h18" type="hidden" value="" name="h18" />
	<input id="h19" type="hidden" value="" name="h19" />
	<input id="h20" type="hidden" value="" name="h20" />
	<input id="h21" type="hidden" value="" name="h21" />
	<input id="h22" type="hidden" value="" name="h22" />
	<input id="h23" type="hidden" value="" name="h23" />
	<input id="h0" type="hidden" value="" name="h0" />
	<input id="h1" type="hidden" value="" name="h1" />
	<input id="h2" type="hidden" value="" name="h2" />
	<input id="h3" type="hidden" value="" name="h3" />
	<input id="h4" type="hidden" value="" name="h4" />
	<input id="h5" type="hidden" value="" name="h5" />
	<input id="h6" type="hidden" value="" name="h6" />

</td>
    <td width="38px">
                  </td>
         </tr>
</table> </center>
	<br />

        <center> <input type="submit" value="Valider"> </center>

   <!-- END step_2 -->


<script type="text/javascript">
	refresh_navette();

        init_page();
</script>

